<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="editorValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import {Boot, IEditorConfig, IToolbarConfig} from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-formula'
import {getToken} from "@/utils/auth";

import kityformula from "@/utils/formula/kityformula";
import myscriptMath from "@/utils/formula/myscriptMath"
import {getTempToken} from "@/api/files/file";
import {Message} from "element-ui";

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
// Boot.registerModule(formulaModule)


export default {
  name: 'WangEditor',
  components: {Editor, Toolbar},
  props: {
    value: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'default' // 'default' 或 'simple'
    }
  },
  data() {
    return {
      editor: null,
      editorValue: '',
      toolbarConfig: {
        excludeKeys: [], // 要排除的菜单项
        insertKeys: {
          index: 0,
          keys: [
            'insertFormula', // “插入公式”菜单
            "kityFormula", // “编辑公式”菜单
            'editFormula',// “编辑公式”菜单
            "myscriptMath"

          ],
        },
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // uploadVideo: {
          //   fieldName: 'file',
          //
          //   // 单个文件的最大体积限制，默认为 10M
          //   maxFileSize: 5 * 1024 * 1024, // 5M
          //
          //   // 最多可上传几个文件，默认为 5
          //   maxNumberOfFiles: 3,
          //
          //   // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
          //   allowedFileTypes: ['video/*'],
          //
          //   // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
          //   meta: {
          //     type: 'video',
          //   },
          //
          //   // 将 meta 拼接到 url 参数中，默认 false
          //   metaWithUrl: true,
          //
          //   // 自定义增加 http  header
          //   headers: {
          //     Authorization: getToken()
          //   },
          //
          //   // 跨域是否传递 cookie ，默认为 false
          //   withCredentials: true,
          //
          //   // 超时时间，默认为 30 秒
          //   timeout: 15 * 1000, // 15 秒
          //
          //   // 视频不支持 base64 格式插入
          //
          //   // 自定义插入视频
          //   customInsert(result, insertFn) {
          //     // TS 语法
          //     // customInsert(res, insertFn) {                  // JS 语法
          //     // res 即服务端的返回结果
          //
          //     // 从 res 中找到 url poster ，然后插入视频
          //     let id = result.data.url.split('/');
          //     id = id[id.length - 1]
          //     //从后端获取临时访问链接
          //     getTempToken(id).then(res => {
          //       console.log('========res', res)
          //       if(res.code === 200){
          //         res.data.forEach(file => {
          //           console.log('file', file)
          //           insertFn(file.fileUrl)
          //         });
          //       } else {
          //         Message.error(res.msg || '文件上传失败');
          //       }
          //
          //     })
          //     // insertFn(url)
          //   },
          // },
          uploadImage: {
            // 图片上传配置
            server: process.env.VUE_APP_BASE_API + '/file/upload/editor/imgs',
            fieldName: 'files', // 表单字段名
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              type: 'img',
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization: getToken(),
            },
            customInsert(result, insertFn) {
              console.log('====================>onInsertedImage')

              console.log('result', result)
              result.data.forEach(item => {
                insertFn(item.fileId, item.fileId, '')
              })
            },
          },
          insertImage: {
            onInsertedImage(imageNode) {
              if (imageNode == null) return
              const {src, alt, url, href} = imageNode
              console.log('inserted image===============>', src, alt, url, href)
            },
            checkImage: (src, alt, url) => {
              return true;
            },
            parseImageSrc: async (src, alt, url) => {
              const res = await getTempToken(src);
              return res.data[0].fileUrl;
            }

          },
          fontSize: {
            fontSizeList: ['12px', '14px', '16px', '18px', '24px', '32px', '48px']
          },
          lineHeight: {
            lineHeightList: ['1', '1.5', '1.75', '2', '2.5', '3', '4']
          },
          fontFamily: {
            // fontFamilyList: [
            //   '黑体',
            //   '楷体',
            //   '宋体',
            //   '微软雅黑',
            //   'Arial',
            //   'Tahoma',
            //   'Verdana'
            // ]
          },
          // emotion: {
          //   emotions: [
          //     {
          //       title: '默认',
          //       type: 'image',
          //       content: [
          //         {
          //           alt: '[微笑]',
          //           src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif'
          //         },
          //         {
          //           alt: '[哈哈]',
          //           src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif'
          //         }
          //       ]
          //     }
          //   ]
          // },
          hoverbarKeys: {
            formula: {
              menuKeys: ['editFormula'], // “编辑公式”菜单
            },
          },
        }
      },

    }
  },
  watch: {
    value(newVal) {
      if (newVal !== this.editorValue) {
        this.editorValue = newVal
      }
    }
  },
  created() {
    // 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
    Boot.registerModule(formulaModule)
    Boot.registerMenu(kityformula);
    Boot.registerMenu(myscriptMath);
  },
  mounted() {
    this.editorValue = this.value
  },
  beforeDestroy() {
    if (this.editor == null) return
    this.editor.destroy()
    this.editor = null
  },
  methods: {

    handleCreated(editor) {
      this.editor = editor
    },
    handleChange(editor) {
      const html = editor.getHtml()
      this.$emit('input', html)
      this.$emit('change', html)
    },
    getContent() {
      if (this.editor == null) return
      return this.editor.getHtml()
    },
    getText() {
      if (this.editor == null) return
      return this.editor.getText()
    },
    async setContent(html) {
      //处理html
      try {
        // 1. 提取所有img的alt属性值
        const imgAlts = this.extractImgAlts(html);

        // 2. 获取临时token和文件信息
        const res = await getTempToken(imgAlts.join(','));
        if (res.code !== 200) {
          throw new Error('获取临时token失败: ' + (res.msg || ''));
        }

        // 3. 替换HTML中的图片URL
        const updatedHtml = this.replaceImgUrls(html, res.data);

        // 4. 设置编辑器内容
        if (this.editor == null) return
        await this.$nextTick() // 确保DOM更新
        this.editor.setHtml(updatedHtml)
        this.editorValue = updatedHtml // 确保数据同步
      } catch (error) {
        console.error('处理图片URL失败:', error);
        this.editor.setHtml(html)
        this.editorValue = html // 确保数据同步
      }

    },

    // 提取img的alt属性值
    extractImgAlts(html) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const imgs = doc.querySelectorAll('img');
      return Array.from(imgs).map(img => img.getAttribute('alt') || '');
    },

    // 替换图片的URL
    replaceImgUrls(html, fileInfoList) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const imgs = doc.querySelectorAll('img');

      // 创建alt到fileInfo的映射，方便查找
      const altToFileInfoMap = {};
      fileInfoList.forEach(fileInfo => {
        altToFileInfoMap[fileInfo.fileId] = fileInfo;
      });

      // 遍历所有图片元素
      imgs.forEach(img => {
        const alt = img.getAttribute('alt') || '';
        const fileInfo = altToFileInfoMap[alt];

        if (fileInfo && fileInfo.fileUrl) {
          // 替换src属性为新的URL
          img.setAttribute('src', fileInfo.fileUrl);

          // 如果需要保留其他属性，可以在这里处理
          // 例如保留style属性等
        }
      });

      // 将修改后的DOM转换回HTML字符串
      const serializer = new XMLSerializer();
      let updatedHtml = serializer.serializeToString(doc.body);

      // 移除自动添加的<body>标签（如果有）
      updatedHtml = updatedHtml.replace(/^<body>|<\/body>$/g, '');
      console.log('updatedHtml:', updatedHtml)

      return updatedHtml;
    }


  }
}
</script>
<style>
/** 解决全屏遮盖问题*/
.w-e-full-screen-container {
  z-index: 2000 !important;
}
</style>
